<template>
  <div class="type-management">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>类型管理</span>
        <el-input 
          placeholder="搜索类型" 
          v-model="searchQuery" 
          clearable 
          style="width: 300px; float: left; margin-right: 10px;"
        ></el-input>
        <el-button type="primary" size="small" style="float: right;" @click="openAddDialog">添加类型</el-button>
      </div>
      <el-table :data="filteredTypes" style="width: 100%; margin-top: 20px">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="类型名称"></el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot="scope">
            <el-button size="small" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteType(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="currentType">
        <el-form-item label="类型名称">
          <el-input v-model="currentType.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveType">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      types: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '家用电器' },
        { id: 3, name: '服装' },
        { id: 4, name: '食品' },
        { id: 5, name: '家具' },
        { id: 6, name: '玩具' },
        { id: 7, name: '图书' },
        { id: 8, name: '运动用品' },
        { id: 9, name: '办公用品' },
        { id: 10, name: '个人护理' },
        { id: 11, name: '汽车配件' }
      ],
      dialogVisible: false,
      dialogTitle: '',
      currentType: {
        id: null,
        name: ''
      },
      searchQuery: ''
    };
  },
  computed: {
    filteredTypes() {
      return this.types.filter(type => 
        type.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    openAddDialog() {
      this.dialogTitle = '添加类型';
      this.currentType = { id: null, name: '' };
      this.dialogVisible = true;
    },
    openEditDialog(type) {
      this.dialogTitle = '编辑类型';
      this.currentType = { ...type };
      this.dialogVisible = true;
    },
    saveType() {
      if (this.currentType.name.trim() === '') {
        this.$message.error('类型名称不能为空');
        return;
      }
      if (this.currentType.id) {
        // 编辑类型
        const index = this.types.findIndex(type => type.id === this.currentType.id);
        if (index !== -1) {
          this.types.splice(index, 1, this.currentType);
        }
      } else {
        // 添加类型
        this.currentType.id = this.types.length + 1;
        this.types.push(this.currentType);
      }
      this.dialogVisible = false;
    },
    deleteType(id) {
      this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.types = this.types.filter(type => type.id !== id);
        this.$message.success('删除成功');
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style scoped>
.type-management {
  padding: 20px;
  width: 80%;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-button {
  margin-left: 10px;
}

.dialog-footer {
  text-align: right;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
